<script setup lang="ts">
import { ref, reactive } from "vue";
import { ClassStore } from "@/stores/BackData/ClassManage/class";
import { myaddVideo } from "@/api/teacher/he/class";
import { editVi } from "@/api/teacher/he/class";
import { getOneVideo } from "@/api/teacher/he/class";
import { delvideo } from "@/api/teacher/he/class";
import { ElFormItem, ElMessage, ElMessageBox } from "element-plus";

const store = ClassStore();
const video = store.video;

const formLabelWidth = "140px";
const editBox = ref(false);
const delBox = ref(false);

const content = reactive<any>(
  []
  //   {
  //   classId: store.oneClass.id,
  //   serialNumber: null,
  //   videoDuration: "",
  //   video: "",
  //   // "https://onlineclass2-1256902071.cos.ap-chengdu.myqcloud.com/onlineclass2/6121701769371373.mp4",
  //   videoName: "",
  //   h: null,
  //   m: null,
  //   s: null,
  // }
);

const showEdit = (id: any) => {
  // console.log(id);

  getOneVideo(id).then((res) => {
    // console.log(res);
    content.length = 0;
    content.push(res.data.data);
    console.log(content);

    editBox.value = true;
  });
};

const file = reactive<any>([]);
const changeVideo = (e: any) => {
  file.length = 0;
  file.push(e.target.files[0]);
};
// const test = () => {
//   getVideoDuration(file);
//   content[0].video =
//     "https://onlineclass2-1256902071.cos.ap-chengdu.myqcloud.com/onlineclass2/4721701771328661.mp4";
//   getVideoDuration(file);
// };

// 获取视频时长
const myduration = ref<any>("");
const myaudio = ref<any>("");

const getVideoDuration = (file: any) => {
  // var url: any = window.URL.createObjectURL(new Blob(file));
  // console.log(url);

  var audioElement: any = new Audio(content[0].video);
  // let audioElement: any = document.getElementById("test");

  audioElement.addEventListener("loadedmetadata", function () {
    // console.log(audioElement.duration);
    myduration.value = parseInt(audioElement.duration);
    let h = Math.floor(parseInt(audioElement.duration) / 3600);
    let m = Math.floor((parseInt(audioElement.duration) % 3600) / 60);
    let s = Math.floor(parseInt(audioElement.duration) % 60);
    content[0].h = h;
    content[0].m = m;
    content[0].s = s;
    content[0].videoDuration = h + ":" + m + ":" + s;
    console.log(content[0]);
    // 编辑视频
    editVi(content[0]).then((res) => {
      console.log(res);
      ElMessageBox.alert("视频编辑成功", "提示", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "OK",
      });
      file.length = 0;
      editBox.value = false;
    });
  });
};

// 编辑
const videoEdit = () => {
  let fd = new FormData();
  fd.append("video", file[0]);
  console.log(fd);
  console.log(content[0]);
  if (file.length == 1) {
    myaddVideo(fd)
      .then((res) => {
        console.log("上传成功");
        myaudio.value = res.data.data;
        content[0].video = res.data.data;

        getVideoDuration(file);
        // console.log(content[0]);
      })
      .catch((err) => {
        console.log(err);

        alert("上传失败");
      });
  } else {
    getVideoDuration(file);
  }
};

// 删除
let id: any = reactive({ id: null });
const showDel = (myid: any) => {
  id.id = myid;
  // console.log(id);

  delBox.value = true;
};

const videoDel = () => {
  // console.log(id);

  delvideo(id.id).then((res: any) => {
    ElMessageBox.alert("删除成功", "提示", {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: "OK",
    });
    delBox.value = false;
  });
};
</script>
<template>
  <div class="buttom">
    <p>课程目录</p>
    <div>
      <el-scrollbar height="400px">
        <!-- {{ store.oneClass[0].videoVos.length }} -->
        <!-- <template v-if="store.oneClass[0].videoVos.length == 0">
          <el-empty description="暂无数据" />
        </template>
        <template v-else> -->

        <template v-for="item in store.oneClass[0].videoVos">
          <div class="oneclass">
            <!-- {{ store.oneClass[0].videoVos }} -->
            <div>
              <div>
                <span class="iconfont icon-shipin-xian"></span>
              </div>
              <div>{{ item.serialNumber }}</div>
              <div>{{ item.videoName }}</div>
              <div>{{ item.videoDuration }}</div>
            </div>
            <div>
              <el-button @click="showEdit(item.id)">编辑</el-button>
              <el-button @click="showDel(item.id)">删除</el-button>
            </div>
          </div>
        </template>
        <!-- </template> -->
      </el-scrollbar>
    </div>
  </div>

  <!-- 编辑视频 -->
  <el-dialog v-model="editBox" title="编辑视频">
    <el-form :model="video">
      <el-form-item label="视频名称" label-width="100px" prop="video_name">
        <el-input
          v-model="content[0].videoName"
          autocomplete="off"
          placeholder="请输入视频名称"
        />
      </el-form-item>
      <el-form-item label="序号" :label-width="formLabelWidth" prop="id">
        <el-select
          v-model="content[0].serialNumber"
          placeholder="请选择排序序号"
        >
          <el-option label="01" value="1" />
          <el-option label="02" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="上传视频" :label-width="formLabelWidth">
        <!-- <el-button type="primary" @click="uploadVideo">点击上传</el-button> -->
        <input type="file" name="" id="" @change="changeVideo" />
      </el-form-item>
    </el-form>
    <el-form-item :label-width="formLabelWidth" required prop="video_duration">
      {{ content.video }}
      <!-- <audio ref="audio" class="aud" id="test">
        <source :src="content.video" /> -->
      <!-- <source
          src="https://onlineclass2-1256902071.cos.ap-chengdu.myqcloud.com/onlineclass2/6121701769371373.mp4"
        /> -->
      <!-- </audio> -->
      <!-- <el-input v-model="content.videoDuration" autocomplete="off" disabled /> -->
    </el-form-item>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editBox = false">取消</el-button>
        <el-button type="primary" @click="videoEdit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除视频 -->
  <el-dialog v-model="delBox" title="删除课程" width="30%">
    <P>是否确定删除该课程？</P>
    <P>删除此课程将无法恢复</P>
    <hr />

    <span class="dialog-footer">
      <el-button @click="delBox = false">取消</el-button>
      <el-button type="primary" @click="videoDel()"> 确认 </el-button>
    </span>
  </el-dialog>
</template>
<style scoped>
.buttom {
  width: 80%;
  background-color: white;
  height: 100vh;
  margin: 10px auto;
  padding: 30px;
}
.buttom > div {
  margin-top: 10px;
}
.oneclass {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-top: 10px;
  background-color: #f5f7fa;
  border-radius: 3px;
}
.oneclass > div:first-child {
  /* height: 20px;
  line-height: 20px; */
  width: 60%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.oneclass > div:last-child {
  height: 40px;
  margin-top: -15px;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
